<template>
    <div id="topLeft" class="chart-view-box">
        <dv-loading v-if="loading">Loading...</dv-loading>
        <div v-else class="bg-color-black">
            <div class="d-flex pt-2 pl-2 chart-title-box">
                <span class="chart-icon">
                  <icon name="chart-line"></icon>
                </span>
                <div class="d-flex chart-title">
                    <span class="text mx-2">{{ chartTitle }}</span>
                </div>
                <HandleGroup ref="handleGroup"
                             :enableInterval.sync="enableInterval"
                             @setIntervalDur="setIntervalDur"/>
            </div>
            <div v-if="enableInterval" class="decoration2">
                <dv-decoration-2 v-if="openCountDown" :reverse="true" :dur="intervalDuration"/>
            </div>
            <TopLeftChart ref="chartIndex"
                          :intervalDuration="intervalDuration"
                          :enableInterval="enableInterval"/>
        </div>
    </div>
</template>

<script>
import TopLeftChart from "@/components/echart/view1/top/topLeftChart";
import HandleGroup from "@/components/handleGroup";

export default {
    data() {
        return {
            chartTitle: '任务实时进度监控',
            intervalDuration: 10,
            enableInterval: true,
            loading: true,
            openCountDown: true,
        };
    },
    components: {
        TopLeftChart,
        HandleGroup,
    },
    mounted() {
        this.selfUtils.cancelLoading(this, 1000);
    },
    methods: {
        setIntervalDur(data) {
            this.intervalDuration = Number(data.intervalDurConfig);
            this.$nextTick(() => {
                data.that.loading = false;
            })
        },
        toggleCountDown() {
            this.openCountDown = !this.openCountDown;
        },
    }
};
</script>

<style lang="scss" scoped>
</style>